<script setup lang="ts">
import { routes } from '../routers/routes';
import sound from '../assets/sound.wav';
import SideNavi from '../components/Navigation/SideNavi.vue';

const isSideNaviCollapsed = ref(true);
const headMenuSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const { play } = useSound(sound);
const sideNaviRef = ref<InstanceType<typeof SideNavi> | null>(null);
const titleIconClicked = () => {
  play();
  sideNaviRef.value?.toggleMenu();
};
</script>

<template>
  <el-container>
    <el-header class="bg-teal-300 flex justify-center items-center">
      <head-bar
        @select="headMenuSelect"
        @title-click="titleIconClicked"
      ></head-bar>
    </el-header>
    <el-container id="main-container">
      <side-navi
        :collapse="isSideNaviCollapsed"
        :routes="routes.find(route => route.path == '/main')"
        ref="sideNaviRef"
      >
        <!-- 导航的头部和底部菜单可以通过slot自定义 -->
        <template #header-menu></template>
        <template #footer-menu>
          <el-menu-item @click="$router.push('/')">
            <el-icon>
              <span class="mdi mdi-exit-to-app"></span>
            </el-icon>
            <span>退出</span>
          </el-menu-item>
        </template>
      </side-navi>
      <el-container>
        <el-scrollbar>
          <el-main>
            <router-view-with-transition />
          </el-main>
        </el-scrollbar>
      </el-container>
    </el-container>
  </el-container>
</template>

<style scoped>
#main-container {
  height: calc(100% - var(--el-header-height));
}
.el-header {
  --el-header-padding: 0;
  --el-header-height: inherit;
}
</style>
